<template>
  <div class="a">
    <div class="dynamic-header flex justify-between flex-shrink-0" style="background: transparent">
      <div class="w-256px bg-blue-300 flex items-center text-base justify-center" style="background: transparent">
      </div>
      <div class="w-40 flex items-center justify-center select-none bg-light-100" style="background: transparent">
        <Locale/>
      </div>
    </div>
    <div class="login-box">
      <div class="login-logo">
        <!--        <img src="@/assets/img/logo.jpg" width="45"/>-->
        <h1 class="mb-0 ml-2 text-3xl font-bold">Dynamic Mock</h1>
      </div>
      <a-form layout="horizontal" :model="loginParam" @submit.prevent="handleSubmit">
        <a-form-item>
          <a-input v-model:value="loginParam.userAccount" size="large" :placeholder="$t('login.inputAccount')">
            <template #prefix>
              <user-outlined type="user"/>
            </template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input
              v-model:value="loginParam.password"
              size="large"
              type="password"
              :placeholder="$t('login.inputPassword')"
              autocomplete="new-password"
          >
            <template #prefix>
              <lock-outlined type="user"/>
            </template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-checkbox v-model:checked="loginParam.remember">{{ $t('login.remember') }}</a-checkbox>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit" size="large" block>
            {{ $t('login.login') }}
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import {reactive} from 'vue';
import {LockOutlined, UserOutlined} from '@ant-design/icons-vue';
import {useRouter} from 'vue-router';
import {message} from 'ant-design-vue';
import {login} from "@/request/api";
import Locale from "@/components/Locale.vue";
import {i18n} from "@/i18n";

const t = i18n.global.t;

const loginParam = reactive({
  userAccount: 'root',
  password: 'root',
  remember: true,
})

const router = useRouter();

const handleSubmit = async () => {
  if (loginParam.userAccount.trim() == '') {
    return message.warning(t('login.pleaseInputAccount'));
  }
  if (loginParam.password.trim() == '') {
    return message.warning(t('login.pleaseInputPassword'));
  }
  const key = "login"
  message.open({
    key,
    type:"loading",
    duration:0,
    content: "",
  })
  await login(loginParam);
  message.destroy(key)
  await router.push({
    name: "/"
  })
  window.location.reload()
};
</script>

<style lang="less" scoped>
.a {
  background: url('@/assets/img/login.jpg');
  background-size: 100%;
  width: 100vw;
  height: 100vh;
}

.login-box {
  display: flex;
  padding-top: 240px;
  flex-direction: column;
  align-items: center;

  .login-logo {
    display: flex;
    margin-bottom: 30px;
    align-items: center;

    .svg-icon {
      font-size: 48px;
    }
  }

  :deep(.ant-form) {
    width: 400px;

    .ant-col {
      width: 100%;
    }

    .ant-form-item-label {
      padding-right: 6px;
    }
  }
}
</style>
